<template>
  <div class="m-table-base">
    <table>
      <thead>
        <tr>
          <th
            v-for="(col, colIndex) in columns"
            :key="col.prop"
            :align="col.align"
            :style="{ width: col.width, textAlign: col.align || defaultAlign }"
          >
            <slot :name="col.labelSlot" :column="col" :$index="colIndex">{{ col.label }}</slot>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in data">
          <td
            v-for="col in columns"
            :key="col.prop"
            :style="{ textAlign: col.align || defaultAlign }"
          >
            <slot :name="col.valueSlot" :row="row" :column="col" :$index="rowIndex">
              {{ col.formatter ? col.formatter(row, col, row[col.prop]) : row[col.prop] }}
            </slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup name="MTableBase">
defineProps({
  columns: Array,
  data: Array,
})

const defaultAlign = 'centeer'
</script>

<style lang="stylus" scoped>
.m-table-base
  font-size 14px
  color #4E5969
  background #fff
  table
    width 100%
    border-collapse: collapse;
  thead
    border-radius 6px 6px 0 0
  tbody
    border-radius 0 0 6px 6px
    tr:first-child
      td
        border-top none
  th,td
    padding 12px 17px
  th
    background #F5F8FC
    color #2D2926
    font-weight normal
    border 1px solid #F5F8FC
  td
    border 1px solid #D8DDE2
</style>
